<template>
  <el-tabs type="border-card" class="demo-tabs" style="margin-top:20px;border-radius: 8px;">
    <el-tab-pane>
    	<template #label>
    	    <span class="custom-tabs-label" v-if="pieceNum!=0">
    	        <el-badge :value="pieceNum" class="item" type="danger">计件重审</el-badge>
    	    </span>
    		<span class="custom-tabs-label" v-if="pieceNum==0">
    			计件重审
    		</span>
    	</template>
        <Piece ></Piece>
    </el-tab-pane>
    
    <el-tab-pane>
    	<template #label>
    	    <span class="custom-tabs-label" v-if="kpiNum!=0">
    	        <el-badge :value="kpiNum" class="item" type="danger">提成重审</el-badge>
    	    </span>
    		<span class="custom-tabs-label" v-if="kpiNum==0">
    			提成重审
    		</span>
    	</template>
        <KPI ></KPI>
    </el-tab-pane>
    
    <el-tab-pane>
    	<template #label>
    	    <span class="custom-tabs-label" v-if="scoreNum!=0">
    	        <el-badge :value="scoreNum" class="item" type="danger">评分重审</el-badge>
    	    </span>
    		<span class="custom-tabs-label" v-if="scoreNum==0">
    			评分重审
    		</span>
    	</template>
        <Score ></Score>
    </el-tab-pane>
    
    <el-tab-pane>
    	<template #label>
    	    <span class="custom-tabs-label" v-if="okrNum!=0">
    	        <el-badge :value="okrNum" class="item" type="danger">okr重审</el-badge>
    	    </span>
    		<span class="custom-tabs-label" v-if="okrNum==0">
    			okr重审
    		</span>
    	</template>
        <Okr ></Okr>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import {ref, onMounted, reactive,getCurrentInstance,onBeforeMount} from "vue";
import { useRoute } from 'vue-router'
import { Timer } from '@element-plus/icons-vue';
import { Calendar } from '@element-plus/icons-vue'
import Piece from './components/piece'
import KPI from './components/KPI'
import Score from './components/score'
import Okr from './components/okr'
import { getSecondBackScoreTask ,getSecondBackPieceTask,getSecondBackOkrTask,getSecondBackKpiTask } from "@/api/resultSecond";


let assessorId = JSON.parse(localStorage.getItem("userInfo")).id;

const pieceNum = ref(0);
const kpiNum = ref(0);
const scoreNum = ref(0);
const okrNum = ref(0);
onBeforeMount(() => {
  getSecondBackPieceTask({ assessorId }).then((data) => {
    pieceNum.value = data.data.length
  });
  getSecondBackScoreTask({ assessorId }).then((data) => {
    scoreNum.value = data.data.length
  });
  getSecondBackOkrTask({ assessorId }).then((data) => {
    okrNum.value = data.data.length
  });
  getSecondBackKpiTask({ assessorId }).then((data) => {
	kpiNum.value = data.data.length
  });
  
});


const update = () => {
  getSecondBackPieceTask({ assessorId }).then((data) => {
    if (data.code == 200) {
      ElMessage({
        message: "更新成功",
        type: "success",
      });
      pieceNum.value = data.data.length;
    } else {
      ElMessage.error("更新失败");
    }
  });
  
  getSecondBackScoreTask({ assessorId }).then((data) => {
    if (data.code == 200) {
      ElMessage({
        message: "更新成功",
        type: "success",
      });
	  scoreNum.value = data.data.length
    } else {
      ElMessage.error("更新失败");
    }
  });
  
  getSecondBackKpiTask({ assessorId }).then((data) => {
    if (data.code == 200) {
      ElMessage({
        message: "更新成功",
        type: "success",
      });
      
      kpiNum.value = data.data.length;
    } else {
      ElMessage.error("更新失败");
    }
  });
  
  getSecondBackOkrTask({ assessorId }).then((data) => {
    if (data.code == 200) {
      ElMessage({
        message: "更新成功",
        type: "success",
      });
      okrNum.value = data.data.length;
    } else {
      ElMessage.error("更新失败");
    }
  });
  
};
</script>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
</style>
